/** node核心模块 专门处理路径问题 */
const path = require("path")
const ESlintPlugin = require('eslint-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    /** 入口文件（一个或多个） */
    entry: "./src/main.js",
    /** 输出 */
    output: {
        /** 
         * 文件输出的路径 
         * path 要绝对路径
         * __dirname：node.js 的变量，代表当前文件的文件夹目录
        */
        path: path.resolve(__dirname, "dist"),
        /** 入口文件打包输出之后的文件名及文件位置 */
        filename: "static/js/main.js",
        /** 
         * 作用：打包前自动删除上次打包的 dist 文件夹
         * 原理：在打包前，将 path 整个目录内容清空，再进行打包 
        */
        clean: true,
    },
    /** 加载器 */
    module: {
        rules: [
            /** loader 的配置 */
            {
                // 只检测 .css 文件，i 指忽略大小写
                test: /\.css$/i,
                /**
                 * 执行顺序：从右到左，（从下到上）执行
                 * css-loader：将 css 资源编译成 commonjs 的模块到 js 中 
                 * style-loader：将 js 中 css 通过创建 style 标签添加 html 文件中生效
                 **/
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.less$/i,
                use: ["style-loader", "css-loader", "less-loader"]
            },
            {
                test: /\.s[ac]ss$/i, // [ac] 表示 a 和 c 都可以
                use: ["style-loader", "css-loader", "less-loader"]
            },
            {
                test: /\.styl$/i,
                use: ["style-loader", "css-loader", "stylus-loader"]
            },
            {
                test: /\.(png|jpe?g|gif|webp|svg)$/,
                type: "asset",
                parser: {
                    dataUrlCondition: {
                        /** 小于 600kb 的图片转换为 base64 
                         * 优点：减少请求数量
                         * 缺点：转为 base64 体积会变大，导致整个项目体积变大
                        */
                        maxSize: 600 * 1024, // 600kb
                    }
                },
                generator: {
                    // 输出图片的名称
                    // [hash:10]：表示 hash 值取前 10 位，不写
                    // [hash]：表示全部 hash 值
                    filename: "static/images/[hash:10][ext][query]",
                }
            },
            {
                test: /\.(ttf|woff2|map3|map4|avi)$/,
                type: "asset/resource",
                generator: {
                    // 输出文件名称
                    filename: "static/media/[hash:10][ext][query]",
                }
            },
            {
                test: /\.js$/,
                exclude: /node_modules/, // 排除 node_modules 中的 js 文件，这些文件不处理
                use: {
                    // 输出文件名称
                    loader: "babel-loader",
                    /** babel 的配置项也可以直接写到 options 选项中，也可以写到 babel.config.js 文件中 */
                    // options: {
                    //     presets: ["@babel/preset-env"]
                    // }
                }
            }
        ]
    },

    /** 插件 */
    plugins: [
        /** plugins 的配置 */
        new ESlintPlugin({
            context: path.resolve(__dirname, "src")
        }),
        new HtmlWebpackPlugin({
            /**
             * 模板：以 public/index.html 文件创建新的 html 文件
             * 新的 html 文件特点：
             *   1. 结构和原来的一样
             *   2. 会自动引入打包输出的资源
             */
            template: path.resolve(__dirname, "public/index.html")
        })
    ],
    /** 开发服务器 */
    devServer: {
        host: "localhost", // 启动服务器域名
        port: "6001", // 端口
        open: true // 是否自动打开浏览器
    },
    /** 模式 */
    mode: "development",
}